<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- jq-->
    <script src="jquery-1.8.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
</head>
<body>
<div id="app">
    <!--    检索表单部分-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车牌号">
            <el-input v-model="formInline.ebno" placeholder="请填写车牌号"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
            <el-select v-model="formInline.ebbrand" placeholder="请选择品牌">
                <el-option label="全部" value=""></el-option>
                <el-option label="洪都" value="洪都"></el-option>
                <el-option label="小鸟" value="小鸟"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <div style="margin-top: 20px">
        <el-button @click="dialogFormVisible = true">添加</el-button>
    </div>
    <!--    数据表格部分-->
    <el-table
            :data="list"
            style="width: 100%">
        <el-table-column
                prop="ebid"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ebno"
                label="电动车车牌"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ebbrand"
                label="品牌">
        </el-table-column>
        <el-table-column
                prop="ebcolor"
                label="颜色"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ebmodel"
                label="规格"
                width="180">
        </el-table-column>
        <el-table-column
                prop="ebprice"
                label="价格">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);update_dialogFormVisible = true">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--    分页部分-->
    <div class="block">

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
        </el-pagination>
    </div>

    <!--添加表单部分-->
    <el-dialog title="添加**" :visible.sync="dialogFormVisible">
        <el-form :model="add">
            <el-form-item label="车牌号" :label-width="formLabelWidth">
                <el-input v-model="add.ebno" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-select v-model="add.ebbrand" placeholder="请选择品牌">
                    <el-option label="洪都" value="洪都"></el-option>
                    <el-option label="小鸟" value="小鸟"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="add_submit();dialogFormVisible = false">提交</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>

        </div>
    </el-dialog>

    <!--    编辑表单部分-->
    <el-dialog title="编辑**" :visible.sync="update_dialogFormVisible">
        <el-form :model="update">
            <el-form-item label="车牌号" :label-width="formLabelWidth">
                <el-input v-model="update.ebno" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-select v-model="update.ebbrand" placeholder="请选择品牌">
                    <el-option label="洪都" value="洪都"></el-option>
                    <el-option label="小鸟" value="小鸟"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="update_submit();update_dialogFormVisible = false">提交</el-button>
            <el-button @click="update_dialogFormVisible = false">取 消</el-button>

        </div>
    </el-dialog>


</div>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            list: null,//表格内容
            count: 0,//总数
            formInline: {
                ebno: "",
                ebbrand: ""
            },//检索表单数据
            page: 1,//页码
            limit: 10,//每页条数
            update_dialogFormVisible: false,
            dialogFormVisible: false,

            add: {
                ebno: '',
                ebbrand: ''
            },
            update: {
                ebno: '',
                ebbrand: ''
            },
            formLabelWidth: '120px'
        },
        methods: {
            loading(param) {
                this.list = param.data;
                this.count = param.count;
            },
            //改变条数
            handleSizeChange(val) {
                this.limit = val;
                console.log(`每页 ${val} 条`);
                query({
                    page: this.page,
                    limit: this.limit
                });
            },
            //改变页码
            handleCurrentChange(val) {
                this.page = val;
                console.log(`当前页: ${val}`);
                query({
                    page: this.page,
                    limit: this.limit
                });
            },
            //数据检索
            onSubmit() {
                var data = this.formInline;
                data.page = 1;
                data.limit = this.limit;
                query(data);
            },
            add_submit() {
                //添加数据
                add(this.add);
            },
            update_submit() {
                //添加数据
                update(this.update);
            },
            getpage() {
                return this.page;
            },
            getlimit() {
                return this.limit;
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.update = row;

            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //添加完成
            adddone(res) {
                if (res == "添加成功") {
                    this.$message({
                        message: '恭喜你，添加成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('添加失败');
                }
            },
            //修改完成
            updatedone(res) {
                if (res == "修改成功") {
                    this.$message({
                        message: '恭喜你，修改成功',
                        type: 'success'
                    });
                    update_dialogFormVisible = false;
                } else {
                    this.$message.error('修改失败');
                }
            }

        },
        watch: {},
        computed: {}
    });

    query({
        page: app.getpage(),
        limit: app.getlimit()
    });

    function query(data) {
        $.ajax({
            url: "test/chaxun.do",
            type: "get",
            data: data,
            success: function (res) {//res = '{code :0,msg:"成功"}'
                var result = JSON.parse(res);
                if (result.code == 0) {
                    app.loading(result);
                }
            }
        });
    }

    function add(data) {
        $.ajax({
            url: "test/add.do",
            type: "get",
            data: data,
            success: function (res) {
                app.adddone(res);
            }
        });
    }

    function update(data) {
        $.ajax({
            url: "test/update.do",
            type: "get",
            data: data,
            success: function (res) {
                app.updatedone(res);
            }
        });
    }


</script>

</body>
</html>